<template>
    <a-modal :confirm-loading="modalOption.loading" :okText="modalOption.okText" @ok="modalOption.onOk" @cancel="modalOption.onCancel" :cancelText="modalOption.cancelText" :width="modalOption.width" :visible="visible" :title="modalOption.title">
        <a-form-model ref="formData" :model="formData" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
            <div class="content-box">
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="原料类型" prop="rowMaterialType">
                            <span>{{formData.rawType}}</span>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="入库批号" prop="StorageBatch">
                            <span>{{formData.enterStorageBatch}}</span>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="供应商">
                            <span>{{formData.supplierName}}</span>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="品名" prop="varietyName">
                            <div class="btn-input">
                                <a-select class="inside-input" :disabled="disabledForm" v-model="formData.varietyName" placeholder="请选择品名">
                                    <a-select-option v-for="(item,i) in varietyNameList" :key="i" :value="item.varietyName">{{ item.varietyName }}</a-select-option>
                                </a-select>
                                <a-button :disabled="disabledForm" class="primary-empty-btn yuan-form-item-btn" @click="jump('/materialManagement')">档案管理</a-button>
                            </div>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="入库时间" prop="storageDate">
                            <a-date-picker :disabled="disabledForm" :locale="locale" class="w-300" valueFormat="YYYY-MM-DD" v-model="formData.enterStorageTime" placeholder="选择日期" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="厂家生产批号" prop="productionBatch">
                            <span>{{formData.venderProductionBatch}}</span>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="物料代码" prop="materialCode">
                            <span>{{formData.materialCode}}</span>
                        </a-form-model-item>
                    </a-col>
                    <a-col  :span="8">
                        <a-form-model-item label="入库数量" prop="enterStorageNum">
                            <div class="btn-input">
                                <a-input class="inside-input" :disabled="disabledForm" v-model="formData.enterStorageNum" placeholder="请输入入库数量"></a-input>
                                <a-select class="btn-selector" v-model="formData.unit">
                                    <a-select-option v-for="item in unitList" :key="item.id" :value="item.unit">{{item.unit}}</a-select-option>
                                </a-select>
                            </div>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="入库类型" prop="enterStorageType">
                            <a-select :disabled="disabledForm" class="w-300" v-model="formData.enterStorageType" placeholder="请选择入库类型">
                                <a-select-option value="SY">溯源入库</a-select-option>
                                <a-select-option value="NSY">非溯源入库</a-select-option>
                                <a-select-option value="CG">采购入库</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="产地" prop="placeOfOrigin">
                            <a-select :disabled="disabledForm" class="w-300" v-model="formData.placeOfOrigin" placeholder="请选择产地">
                                <a-select-option v-for="(item,i) in placeOfOriginList" :key="i" :value="item">{{item}}</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="仓库" prop="warehouse">
                            <a-select :disabled="disabledForm" class="w-300" v-model="formData.warehouse" placeholder="请选择仓库">
                                <a-select-option value="仓库1">仓库1</a-select-option>
                                <a-select-option value="仓库2">仓库2</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </div>
        </a-form-model>
    </a-modal>
</template>
<script lang="ts">
import nextApi, {MaterialListRes} from "@/api/nextApi";
import {Component, Prop, Vue, Watch} from "vue-property-decorator";
//@ts-ignore
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
@Component({
    name:'AccessoriesDetail',
})
export default class extends Vue{
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) editId!: string;
    @Prop({ default: false }) disabledForm!: boolean;
    @Watch("visible")
    visibleChange() {
        if(this.visible){
            setTimeout(()=>{
                this.pageReady = true
            },1000)
            this.getVarietyNameList()
            this.getUnitList()
        }
        if(this.visible && this.editId)this.getMedHerbInfo()
    }
    @Watch('formData.varietyName')
    locale:any = locale;
    modalOption = {
        width:'90%',
        title: "详情",
        okText: "确定",
        cancelText: "取消",
        loading:false,
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    formData = {
        rawType:'',//原料类型
        enterStorageBatch:'',
        supplierName:'',
        source:'ZPY',
        varietyName:"",
        indate:'',
        enterStorageTime:'',
        venderProductionBatch:'',
        materialCode:'',
        enterStorageNum:'',//入库数量
        unit:'',
        enterStorageType:'溯源入库',
        placeOfOrigin:'',
        warehouse:'',
    }
    varietyNameList :MaterialListRes[] = [];
    placeOfOriginList:string[] = [];
    pageReady = false
    modalOk(){
        this.closeModal()
    }
    closeModal(){
        this.pageReady = false
        this.$emit("closeModal");
    }
    /**
     * @description 一些数据处理和逻辑
     * **/
        //获取单位列表
    unitList:any[] = []
    async getUnitList(){
        const res = await nextApi.getUnitList()
        this.unitList = res.data
        this.formData.unit = res.data[0].unit
    }
    //如果有id查询当前id的信息反填数据
    async getMedHerbInfo(){
        const res:any = await nextApi.getRawInboundDetail({id:this.editId})
        console.log('当前id信息：',res)
        if(res.code === 200){
            this.formData = res.data
        }
    }
    async getVarietyNameList(){
        let params = {
            productType:'中药材',
            state:0,
        }
        const res = await nextApi.getMaterialList(params)
        if(res.data){
            this.varietyNameList = res.data.rows
        }
        if(this.varietyNameList.length > 0){
            this.formData.varietyName = this.varietyNameList[0].varietyName
        }
    }
    jump(url: string) {
        window.open(url);
    }
    mounted(){
        console.log('辅料预览',this.disabledForm)
    }



}
</script>
<style lang="scss">
.btn-input{
    display: flex;
    .inside-input{
        width: 213px !important;
    }
    .ant-input{
        flex-shrink: 0;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .inside-input .ant-select-selection{
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .btn-selector .ant-select-selection{
        border-radius:0;
        background-color: rgba(0, 166, 125, 0.12);
        width: 88px;
    }
    .btn-selector .ant-select .ant-select-enabled{
        width: 88px !important;
    }

}

</style>
<style scoped lang="scss">
.w-300{
    width: 300px !important;
}
.content-box{
    padding: 20px;
    border: 1px solid #ccc;
}
.detailImg{
    width: 200px;
    height: 200px;
}
form .ant-select, form .ant-cascader-picker{
    width: initial;
}
</style>
